<style lang="stylus" scoped>
main
  flex 1

nav
  display none
  position absolute
  bottom 18px
  border-radius 24px
  background rgba(0, 0, 0, 0.5)
  padding 5px 7px
  left 50%
  transform translateX(-50%)

  a
    justify-content center
    background 50% 50% no-repeat
    display flex
    align-items center
    height 18px
    padding 0 4px
    width 18px
    position relative

    &>svg
      &.now
        display none

      position absolute
      --c #fff

      &:hover
        --c #ff3300

    &.now>svg
      display none

      &.now
        display block

video, main
  background #000
  width 100%
  object-fit cover
  align-items center
  justify-content center
  height 100%

main
  h3
    color #fff

.mirror
  transform rotateY(180deg)

@media (max-width 330px)
  main
    border-radius 160px

  video, h1
    border-radius 160px
    height 100%
    width 100%
    box-sizing border-box
    border 2px solid #fff

  video:hover+nav, nav:hover
    display flex
</style>

<template lang="pug">
main(ref="main")
  h3(v-if="err") 请授权{{ err }}
  template(v-else)
    video(:class="{ mirror }" autoplay ref="v")
    nav
      a(:class="{ now: size <= 250 }" @click="w(204)")
        svg(
          fill="none"
          height="11"
          viewBox="0 0 10 11"
          width="10"
          xmlns="http://www.w3.org/2000/svg"
        )
          circle(cx="5" cy="5.5" opacity="0.6" r="4.5" stroke="var(--c)")
        svg.now(
          fill="none"
          height="24"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        )
          circle(cx="12" cy="12" fill="var(--c)" opacity="0.7" r="4.5" stroke="var(--c)")

      a(:class="{ now: size >= 310 }" @click="w(324)")
        svg(
          fill="none"
          height="15"
          viewBox="0 0 14 15"
          width="14"
          xmlns="http://www.w3.org/2000/svg"
        )
          circle(cx="7" cy="7.5" opacity="0.7" r="6.5" stroke="var(--c)")
        svg.now(
          fill="none"
          height="25"
          viewBox="0 0 24 25"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        )
          circle(
            cx="12"
            cy="12.5"
            fill="var(--c)"
            opacity="0.7"
            r="6.5"
            stroke="var(--c)"
          )
      a(:class="{ mirror }" @click="turn")
        svg(
          fill="none"
          height="25"
          viewBox="0 0 24 25"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        )
          g(opacity="0.6")
            path(
              d="M10 18.5V6.5L3 18.5H10Z"
              fill="var(--c)"
              stroke="var(--c)"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
            )
            path(
              d="M14 18.5V6.5L21 18.5H14Z"
              stroke="var(--c)"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
            )
      a(@click="x")
        svg(
          fill="none"
          height="25"
          viewBox="0 0 24 25"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        )
          g(opacity="0.6")
            path(
              d="M16 8.5L8 16.5"
              stroke="var(--c)"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
            )
            path(
              d="M16 16.5L8 8.5"
              stroke="var(--c)"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
            )
</template>

<script lang="coffee">
import config from '~/store/record.coffee'
import media_get from '~/lib/media_get.coffee'
import ipc from '~/lib/ipc.coffee'
import sleep from 'await-sleep'
import drag from '~/lib/drag.coffee'
{camera} = ipc

VIDEO = 'video'

export default {
setup:=>
  v = shallowRef()
  main = shallowRef()

  err = shallowRef false

  _get = (type)=>
    loop
      try
        s = await media_get type
      catch e
        console.error type,e
        err.value = {
          audio:'麦克风'
          video:'摄像头'
        }[type]
        await sleep(1000)
        continue
      err.value = false
      return s


  is_camera = 'camera' == config.src

  onMounted =>
    drag main.value

    if is_camera
      li = []
      for i from ['audio',VIDEO]
        s = await _get i
        if s
          if i == VIDEO
            srcObject = s
          li = li.concat s.getTracks()

      setTimeout =>
        stream = new MediaStream li

        watchEffect =>
          {video,audio} = config
          r = {video, audio}
          for i from stream.getTracks()
            i.enabled = !!r[i.kind]
          return

        (await import('~/lib/rec.coffee')).default stream
        return
    else
      srcObject = await _get VIDEO

    v.value.srcObject = srcObject
    return


  size = shallowRef outerWidth
  mirror = shallowRef(if is_camera then 0 else localStorage.人像镜像 - 0)
  return {
    v
    main
    size
    mirror
    err
    w: (w)=>
      localStorage.人像尺寸 = w
      size.value = w
      camera.size(w)
      return
    turn: =>
      localStorage.人像镜像 = (mirror.value = !mirror.value) - 0
      return
    x:=>
      config.video = ''
      return
  }
}
</script>
